<!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8">
        <title>示例</title>
        <style type="text/css">
            .text{background:red;}
            .text2{background:blue;}
        </style>
        <script src="./js/jquery-3.7.1.js"></script>
    
        <script>
            $(document).ready(function() {
                // 1. 修改H2标题的内容和颜色
                $('h2').text('校园花卉一览表').css('color', 'red');

                // 2. 绑定事件处理程序给第一个ul中的列表项和按钮  
                $('ul:first li').click(function() {  
                    $(this).appendTo('ul:last');  
                });  

                $('button').click(function() {  
                    // 克隆第一个ul的所有列表项悬挂到第二个ul中  
                    $('ul:first li').each(function() {  
                        $(this).clone().appendTo('ul:last');  
                    });  
                });  

                // 3. 添加hover效果给第一个h2标题
                $('h2').hover(
                    function() { $(this).slideUp(3000); },
                    function() { $(this).slideDown(3000); }
                );
        });

        </script>
    </head>
    <body>
        <h2>校园花卉列表</h2>
        <ul>
            <li>桂花</li>
            <li class="text2">梅花</li>
            <li>菊花</li>
            <li>兰花</li>
        </ul>
        <ul></ul>
        <button>复制第一个ul里的列表项到第二个ul里</button>
    </body>
    </html>
